<template>
  <a-card title="环境监测空间分布分析">
    <a-row :gutter="16">
      <!-- 左侧: 监测类型选择区域 -->
      <a-col span="6">
        <a-card title="监测类型选择">
          <a-checkbox-group v-model="selectedCategories">
            <a-checkbox value="水质">水质</a-checkbox>
            <a-checkbox value="空气">空气</a-checkbox>
            <a-checkbox value="噪声">噪声</a-checkbox>
            <a-checkbox value="土壤">土壤</a-checkbox>
            <a-checkbox value="特殊污染物">特殊污染物</a-checkbox>
          </a-checkbox-group>
        </a-card>
      </a-col>

      <!-- 右侧: 空间分布分析区域 -->
      <a-col span="18">
        <a-card title="空间分布分析">
          <!-- 地图显示区域 -->
          <div class="map-container" style="height: 400px; margin-bottom: 20px">
            <!-- <MapComponent :categories="selectedCategories" /> -->
          </div>
          <!-- 采集数据列表 -->
          <a-card title="采集数据列表" v-if="selectedCategories.length === 1">
            <a-table :columns="columns" :dataSource="dataList" rowKey="id">
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'threshold'">
                  <a-input-number
                    v-model="record.threshold"
                    style="width: 100px"
                    @dblclick="handleDoubleClick(record, 'threshold')"
                  />
                </template>
                <template v-if="column.dataIndex === 'radius'">
                  <a-input-number
                    v-model="record.radius"
                    style="width: 100px"
                    @dblclick="handleDoubleClick(record, 'radius')"
                  />
                </template>
                <template v-if="column.dataIndex === 'action'">
                  <a-checkbox v-model="record.selected" />
                </template>
              </template>
            </a-table>
          </a-card>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script setup>
import { ref } from "vue";
// import MapComponent from '/@/components/MapComponent.vue'; // 确保路径正确

// 监测类型选择
const selectedCategories = ref([]);

// 采集数据列表
const dataList = ref([
  { id: 1, name: "监测点A", type: "水质", threshold: 100, radius: 50, selected: false },
  { id: 2, name: "监测点B", type: "水质", threshold: 120, radius: 60, selected: false },
  { id: 3, name: "监测点C", type: "空气", threshold: 80, radius: 40, selected: false },
  { id: 4, name: "监测点D", type: "空气", threshold: 90, radius: 45, selected: false },
  { id: 5, name: "监测点E", type: "噪声", threshold: 75, radius: 30, selected: false },
  // 更多数据...
]);

// 表格列配置
const columns = [
  { title: "点名", dataIndex: "name", key: "name" },
  { title: "类型", dataIndex: "type", key: "type" },
  {
    title: "阈值",
    dataIndex: "threshold",
    key: "threshold",
  },
  {
    title: "半径",
    dataIndex: "radius",
    key: "radius",
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];

// 双击编辑阈值和半径
const handleDoubleClick = (record, field) => {
  console.log(`双击编辑: ${field} ${record[field]}`);
  // 在这里可以处理双击编辑逻辑，修改阈值或半径
};

// 显示地图和数据列表
const showDataForCategory = (category) => {
  // 根据选择的监测类型，在地图上显示对应的监测点
  // 更新数据列表显示
  dataList.value = dataList.value.filter((item) => item.type === category);
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>
